import React, { Component } from 'react';
import { View, ViewStyle, TouchableHighlight, Image, Text } from 'react-native';

// const checkedSVG = require('../../src/public/images/check.svg');
// const unCheckedSVG = require('../../src/public/images/uncheck.svg');

const checkedPNG = require('../../src/public/images/checkbox-check.png');
const unCheckedPNG = require('../../src/public/images/checkbox-uncheck.png');

enum BOXTYPE {
    square = 'square',
    circle = 'circle'
}

interface Iprops {
    label: string,
    checked?: boolean,
    onValueChange?: (value: boolean) => any,
    boxStyle?: ViewStyle,
    type?: BOXTYPE,
    size?: number
}

interface Istate {
    checked: boolean,
    img: any
}

class CheckBox extends Component<Iprops, Istate> {
    constructor(props) {
        super(props);
        let checked = this.props.checked || false;
        let img = (checked ? checkedPNG : unCheckedPNG);
        console.log('???', checked, img)
        this.state = {
            checked: checked,
            img
        }
    }

    onValueChange = () => {
        let { checked } = this.state;
        checked = !checked;
        if (this.props.onValueChange) {
            this.props.onValueChange(checked)
        }
        let img = (checked ? checkedPNG : unCheckedPNG);
        this.setState({
            checked: checked,
            img
        })
    }

    render() {
        let {size = 20} = this.props;
        return (
            <View style={{ display: 'flex', flexDirection: 'row' }}>
                <TouchableHighlight style={{ height: size, width: size }} onPress={this.onValueChange}>
                    <Image source={this.state.img} style={{ width: size, height: size }} />
                </TouchableHighlight>
                <Text style={{ height: size, lineHeight: size }}>{this.props.label}</Text>
            </View>
        )
    }
}

export default CheckBox;